const slider = document.getElementById('slider');
const valueDisplay = document.getElementById('sliderValue');
let timeoutId;

// 实时更新显示值
slider.addEventListener('input', function () {
    valueDisplay.textContent = `${this.value}`;
    // 动态调整数值显示位置
    const newPosition = (this.value - this.min) / (this.max - this.min);
    valueDisplay.style.left = `calc(${newPosition * 100}% - ${newPosition * 30}px)`;
    //console.log("鼠标滑动时实时值："+this.value);
});

// 拖动停止后打印到控制台
slider.addEventListener('change', function () {
    clearTimeout(timeoutId);
    console.log(`滑动条最终值-数字变动时: ${this.value}`);
    updateChart_duoji(this.value);
    axios.get('/mybatisdemo/iot/tuoji?currentAngle=' + this.value)
        .then(function (response) {
            // 处理成功情况
            var msg = response.data;
            console.log(msg);

        })
        .catch(function (error) {
            // 处理错误情况
            console.log(error);
        })
        .finally(function () {
            // 总是会执行
        });
});

// 处理快速滑动的情况
slider.addEventListener('mousedown', function () {
    clearTimeout(timeoutId);
});

slider.addEventListener('mouseup', function () {
    timeoutId = setTimeout(() => {
        console.log(`滑动条最终值-鼠标弹起: ${this.value}`);
    }, 200);
});


// ==========================================
myChart_duoji = echarts.init(document.getElementById('duoji'));

function updateChart_duoji(angle) {
    const option_duoji = {
        // backgroundColor: '#f0f0f0',
        title: {
            text: '舵机',
            textStyle: { fontSize: '21px', color: '#ccc' },
            top: 12
        },

        series: [{
            type: 'pie',
            itemStyle: {
                borderColor: '#e6e6e6',   // 边框颜色
                borderWidth: 1,        // 边框宽度
                borderType: 'solid'    // 边框类型，可选 'solid', 'dashed', 'dotted'
            },
            center: ['50%', '40%'], // 第二个值越小越靠近顶部
            radius: '70%',
            startAngle: 90,  // 起点在正上方
            clockwise: true, // 顺时针旋转
            color: ['#1890ff', '#e6e6e6'],
            data: [
                { value: angle, name: '当前角度' },
                { value: 360 - angle, name: '剩余角度' }
            ],
            label: {
                show: false,  // 隐藏标签
                formatter: function (params) {
                    return params.name + ': ' + params.value + '°\n(' + (params.percent).toFixed(1) + '%)';
                }
            }
        }]
    };
    myChart_duoji.setOption(option_duoji);
}

// slider.addEventListener('input', function () {
//     const angle = parseInt(this.value);
//     valueDisplay.textContent = angle + '°';
//     updateChart(angle);
// });

updateChart_duoji(0); // 初始化
